<template>
  <div class="yingmoo-attention">
   <router-view></router-view>
    <ul class="nav">
      <router-link tag="li" to="/ymAttentionmedia">关注的媒体</router-link>
      <li>关注的店铺</li>
      <router-link tag="li" to="/ymAttentionactivity">关注的活动</router-link>
      <div class="uploading">
        <input type="text" placeholder="请输入搜索的店铺" />
        <div class="btn">搜索</div>
      </div>
    </ul>
    <div class="model">
      <div class="template" v-for="m in template">
        <input type="checkbox" />
        <dl>
          <dt><img src="../assets/ym-member/media/logo.png" /></dt>
          <dd class="headline">{{m.name}}</dd>
          <dd class="btn">
            <div class="btn2">进入店铺</div>
            <div class="btn1"><img src="../assets/ym-member/media/attention.png" />取消关注</div>
          </dd>
        </dl>
        <div class="template-right">
          <ul>
            <li>本周上新0</li>
            <li>媒体分类0</li>
            <li>媒体分类1</li>
            <li class="prods">
              <span>1</span><span>/10</span>
              <div class="prod">
                <div>
                  <img src="../assets/ym-member/media/left.png" />
                </div>
                <div>
                  <img src="../assets/ym-member/media/righ.png" />
                </div>
              </div>
            </li>
          </ul>
          <div class="across">
            <dl v-for="n in model">
              <dt><img src="../assets/ym-member/media/pictures.png" /></dt>
              <dd>媒体名称媒体名称媒体名称</dd>
              <dd>价格：120万 元/年</dd>
            </dl>
          </div>
        </div>
      </div>
      <ul class="ul">
        <li>
          <input type="checkbox" id="ours" />
          <label for="ours">全选</label>
        </li>
        <li>
          <img src="../assets/ym-member/media/attention.png" />取消关注
        </li>
        <li>
          <img src="../assets/ym-member/media/right.png" />完成
        </li>
        <li>批量操作</li>
      </ul>
    </div>
    <!--  分页器  -->
    <div class="paging">
      <el-pagination
        :page-size="10"
        background
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-attention",
    data() {
      return {
        model: [{
          name: '活动名称活动名称',
          time: '2017-11-30 至 2017-12-30'
        },{
          name: '活动名称活动名称',
          time: '2017-11-30 至 2017-12-30'
        },{
          name: '活动名称活动名称',
          time: '2017-11-30 至 2017-12-30'
        }, {
          name: '活动名称活动名称',
          time: '2017-11-30 至 2017-12-30'
        }, {
          name: '活动名称活动名称',
          time: '2017-11-30 至 2017-12-30'
        }, {
          name: '活动名称活动名称',
          time: '2017-11-30 至 2017-12-30'
        }, {
          name: '活动名称活动名称',
          time: '2017-11-30 至 2017-12-30'
        }],
        template:[{
          name: '公司名称公司名称公司名称'
        },{
          name: '公司名称公司名称公司名称'
        },{
          name: '公司名称公司名称公司名称'
        },{
          name: '公司名称公司名称公司名称'
        },{
          name: '公司名称公司名称公司名称'
        }]
      }
    }
  }

</script>

<style scoped lang="less">
  .yingmoo-attention {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #036eb7;
          color: white;
        }
        &:nth-child(2){
          background-color: #036eb7;
          color: white;
        }
      }
      .uploading {
        display: flex;
        margin-left: 555px;
        input {
          width: 180px;
          height: 24px;
          border-right: none;
          border-left: 1px solid #999999;
          border-top: 1px solid #999999;
          border-bottom: 1px solid #999999;
          padding-left: 8px;
          font-size: 14px;
          outline: none;
        }
        .btn {
          width: 51px;
          height: 28px;
          font-size: 14px;
          line-height: 28px;
          color: white;
          background-color: #f29600;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .model {
      width: 1200px;
      background-color: white;
      margin: 0 auto;
      .template {
        height: 304px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid #1578bc;
        dl {
          width: 224px;
          height: 246px;
          margin-right: 20px;
          float: left;
          dt {
            img {
              padding-left: 14px;
            }
          }
          .headline {
            line-height: 40px;
            text-align: center;
            color: #333333;
            font-size: 16px;
          }
          .btn {
            display: flex;
            align-items: center;
            div {
              width: 100px;
              height: 40px;
              font-size: 14px;
              text-align: center;
              line-height: 40px;
              margin-left: 7px;
              &:nth-child(2) {
                background-color: #e6e6e6;
                color: #999999;
              }
              &:nth-child(1) {
                background-color: #f29600;
                color: white;
              }
              img {
                position: relative;
                top: 2px;
                right: 3px;
              }
            }
          }
        }
        .template-right {
          height: 246px;
          ul {
            width: 895px;
            li {
              width: 137px;
              height: 40px;
              line-height: 40px;
              color: #666666;
              border: 1px solid #e6e6e6;
              text-align: center;
              float: left;
              &:nth-child(2) {
                border-left: none;
                border-right: none;
              }
            }
            .prods {
              width: 120px;
              border: none;
              float: right;
              display: flex;
              span{
                font-size: 13px;
                color: #999999;
                &:nth-child(1){
                  color: #f29600;
                }
                &:nth-child(2){
                  padding-right: 20px;
                }
              }
              .prod {
                display: flex;
                align-items: center;
                div {
                  width: 30px;
                  height: 20px;
                  border: 1px solid #e6e6e6;
                  background-color: #e6e6e6;
                  &:nth-child(2) {
                    background-color: white;
                  }
                  img {
                    position: relative;
                    bottom: 10px;
                  }
                }
              }
            }

          }
          .across {
            width: 895px;
            overflow: hidden;
            display: flex;
            dl {
              width: 208px;
              clear: both;
              margin-top: 20px;
              dt {
                img {
                  padding-left: 0;
                }
              }
              dd {
                padding-top: 12px;
                font-size: 16px;
                color: #333333;
                &:nth-child(3) {
                  font-size: 14px;
                  color: #f29600;
                }
              }
            }
          }

        }
      }
      .ul {
        clear: both;
        width: 1200px;
        height: 46px;
        background-color: #f2f2f2;
        li {
          float: left;
          line-height: 46px;
          color: #666666;
          margin-left: 22px;
          img {
            margin-right: 6px;
          }
          &:last-child {
            width: 130px;
            float: right;
            background-color: #f29600;
            text-align: center;
            color: white;
            font-weight: bold;
          }
        }
      }
    }
    .paging {
      width: 1200px;
      height: 35px;
      margin: 23px auto;
      text-align: center;
    }
  }

</style>
